import React from 'react';
import { Space, Row, Col, Form, Input } from 'antd';
import { FirstHeaderC, SecondHeaderC, PrimaryC, AutoCompleteC } from '../../components';
import { LoadingOutlined } from '@ant-design/icons';
import { connect } from 'dva';

function transformOptions(dataSource) {
  return dataSource?.map((item) => {
    item.label = item.title;
    return item;
  });
}
class InputCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.state = {
      dataSource: [],
      dataSource1: [],
      value: undefined,
      value1: undefined,
      initialValue1: '中国银行',
    };
  }

  ref = React.createRef();

  ref1 = React.createRef();

  flag = true; // “虚拟文本”标记

  change = () => {
    this.formRef.current.setFieldsValue({ 20: '666' });
  };

  getTradingCompany = (value, type) => {
    console.log(value, type);
    this.props.dispatch({
      type: 'tradingCompanyM/getTradingCompany',
      payload: {
        value: value ? value : '',
        dataType: '2',
        isOtc: '1',
      },
      callback: (e) => {
        if (type === 1) {
          this.setState({
            dataSource1: e || [],
            loading: false,
          });
        } else {
          this.setState({
            dataSource: e || [],
            loading: false,
          });
        }
      },
    });
  };

  componentDidMount() {
    if (this.state.initialValue1) {
      this.getTradingCompany(this.state.initialValue1, 1);
    }
    this.getTradingCompany('', 0);
  }

  // 执行选中
  handleSelect = (value, type) => {};

  handleChange = (value, type) => {
    // 有初始值时 点击清空要重新赋值
    if (value === '') this.getTradingCompany(value, type);
  };

  handleSearch = (value, type) => {
    // 为什么使用延时器？因为选词结束的时候search会比compositionend先一步触发，此时flag还未调整为true，故用setTimeout将其优先级滞后。
    setTimeout(() => {
      if (this.ref.current) this.getTradingCompany(value);
      if (type === 1) {
        console.log(type, this.ref1.current, value);
        if (this.ref1.current) this.getTradingCompany(value, 1);
      } else {
        console.log(type, this.ref.current, value);
        if (this.ref.current) this.getTradingCompany(value, 0);
      }
    }, 0);
  };

  render() {
    return (
      <div className={'maat-form-father'}>
        <Space>
          <PrimaryC
            title={'重置'}
            onClick={() => {
              this.formRef.current.resetFields();
            }}
          />
          <PrimaryC
            title={'打印'}
            onClick={async () => {
              const values = await this.formRef.current.validateFields();
              console.log(values);
            }}
          />
        </Space>

        <Form ref={this.formRef}>
          <Row>
            <FirstHeaderC title='AutoComplete组件' />
            <Col span={12}>
              <SecondHeaderC title='基本场景' />
              <Form.Item label='基本场景' name='first' rules={[{ required: false }]}>
                <AutoCompleteC
                  initialValue={undefined}
                  // style={styleRow ? styleRow : { width }}
                  options={transformOptions(this.state.dataSource)}
                  onSearch={this.handleSearch}
                  onSelect={this.handleSelect}
                  onChange={this.handleChange}
                  placeholder={'请输入'}
                  allowClear={true}
                  // dropdownClassName={this.theme}
                  disabled={false}
                >
                  <Input
                    onCompositionStart={() => {
                      this.ref.current = false;
                    }} // 处理“虚拟文本”
                    onCompositionEnd={() => {
                      this.ref.current = true;
                    }} // 处理“虚拟文本”
                    onBlur={this.onBlur}
                    suffix={<LoadingOutlined style={{ fontSize: this.state.loading ? 12 : 0, color: '#999' }} />}
                  />
                </AutoCompleteC>
              </Form.Item>
            </Col>
            <Col span={12}>
              <SecondHeaderC title='有初始化值' />
              <Form.Item label='有初始化值' name='second' rules={[{ required: false }]} initialValue={this.state.initialValue1}>
                <AutoCompleteC
                  initialValue={this.state.initialValue1}
                  // style={styleRow ? styleRow : { width }}
                  options={transformOptions(this.state.dataSource1)}
                  onSearch={(e) => this.handleSearch(e, 1)}
                  onSelect={(e) => this.handleSelect(e, 1)}
                  onChange={(e) => this.handleChange(e, 1)}
                  placeholder={'请输入'}
                  allowClear={true}
                  // dropdownClassName={this.theme}
                  disabled={false}
                >
                  <Input
                    onCompositionStart={() => {
                      this.ref1.current = false;
                    }} // 处理“虚拟文本”
                    onCompositionEnd={() => {
                      this.ref1.current = true;
                    }} // 处理“虚拟文本”
                    onBlur={this.onBlur}
                    suffix={<LoadingOutlined style={{ fontSize: this.state.loading ? 12 : 0, color: '#999' }} />}
                  />
                </AutoCompleteC>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}

export default connect(({ tradingCompanyM }) => ({ tradingCompanyM }))(InputCDemo);
